{% extends 'website/src/base.html' %}
{% block style %}
    <style>
        .error-msg {
            color: red;
            position: absolute;
            font-size: 17px;
            margin-top: -10px;
        }
                a {
            text-decoration: none;
        }
    </style>
{% endblock %}
{% block main %}
    <section class="m-auto">
        <div class="row d-flex">  <!-- class="col-xxl-4 col-xl-5 col-lg-5 col-md-7 col-sm-9" 换成d-flex -->
            <div class="card shadow-lg">
                <div class="card-body">
                    <h3 class="card-title fw-bold text-center">用户登录</h3>
                    <form method="POST" class="needs-validation" novalidate="" autocomplete="off" action="">
                        {% csrf_token %}
                        {% for field in form %}
                            {% if field.name == 'code' %}
                                <div class="form-group">
                                    <label for="{{ field.id_for_label }}"
                                           style="margin-bottom: 0">{{ field.label }}</label>
                                    <div class="row">
                                        <div class="col-md-7">
                                            {{ field }}
                                        </div>
                                        <div class="col-md-5">
                                            <img src="{% url 'image_code' %}" alt="" id="imageCode"
                                                 title="点击更换图片">
                                        </div>
                                    </div>
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                </div>
                            {% else %}
                                <div class="form-group">
                                    {% if field.name == 'password' %}
                                        <label for="{{ field.id_for_label }}"
                                               style="margin-bottom: 0">{{ field.label }}</label>
                                        <a href="{% url 'forgot' %}" class="float-end">忘记密码?</a>
                                    {% else %}
                                        <label for="{{ field.id_for_label }}"
                                               style="margin-bottom: 0">{{ field.label }}</label>
                                    {% endif %}
                                    {{ field }}
                                    <span class="error-msg">{{ field.errors.0 }}</span>
                                </div>
                                <div class="mt-3 mb-0">
                                    <span style="color: red;">{{ error }}</span>
                                </div>
                            {% endif %}
                        {% endfor %}

                        <div class="row">
                            <div class="col-md-6">
                                <input type="submit" class="btn btn-primary" value="登  录"/>
                            </div>
                            <div class="col-md-6 mt-3">
                                <a href="{% url 'login_sms' %}">短信验证码登录?</a>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="card-footer pt-0 pb-4 border-0">
                    <div class="text-center">
                        没有帐户? <a href="{% url 'register' %}" class="text-dark">创建一个</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
{% endblock %}

{% block js %}
    <script src="/static/js/login.js"></script>
    <script>
        $(function () {
            $('#imageCode').click(function () {
                var oldSrc = $(this).attr('src')
                $(this).attr('src', oldSrc + '?')  // 加?意思是等于给它换了一个新地址,那么它就会再一次发起请求
            })
        })
    </script>
{% endblock %}



